<template>
  <div class="wrap">
    <div class="data" @click = ClickData()>
      <div class="text">查看我的数据</div>
      <img src="../assets/img1/查看我的数据右@2x.png" alt="">
    </div>
    <div class="swipe">
      <van-swipe class="my-swipe" indicator-color="#5C30CF">
        <van-swipe-item>
          <div class="banner_one">
            <div class="top">
              <div class="left_icon">系统</br>最TOP</div>
              <div class="right_icon">
              </div>
            </div>
            <div class="text">
              <div class="li">
                <div class="li_L">
               <img src="../assets/img1/编组.png" alt="">
                 <div class="li_text">
                   <div class="txt_one">系统名称信息展示</div>
                   <div class="txt_tow">系统名称信息展示</div>
                 </div>
                </div>
                <div class="li_R">
                 <span>100</span>分
                </div>
              </div>
              <div class="li">
                 <div class="li_L">
                 <img src="../assets/img1/no.2@2x.png" alt="">
                 <div class="li_text">
                   <div class="txt_one">系统名称信息展示</div>
                   <div class="txt_tow">系统名称信息展示</div>
                 </div>
                </div>
                <div class="li_R">
                 <span>100</span>分
                </div>
              </div>
              <div class="li active">
                 <div class="li_L">
                 <img src="../assets/img1/编组 12.png" alt="">
                 <div class="li_text">
                   <div class="txt_one">系统名称信息展示</div>
                   <div class="txt_tow">系统名称信息展示</div>
                 </div>
                </div>
                <div class="li_R">
                 <span>100</span>分
                </div>
              </div>
            </div>
          </div>
        </van-swipe-item>
        <van-swipe-item>
          <div class="banner_tow">
              <div class="top">
              <div class="left_icon">待进步</br>系统</div>
              <div class="right_icon">
              </div>
            </div>
            <div class="text">
              <div class="li">
                <div class="li_L">
                  <div class="img">
                    NO.
                    <span>1</span>
                  </div>
                 <div class="li_text">
                   <div class="txt_one">系统名称信息展示</div>
                   <div class="txt_tow">系统名称信息展示</div>
                 </div>
                </div>
                <div class="li_R">
                 <span>100</span>分
                </div>
              </div>
              <div class="li">
                 <div class="li_L">
                <div class="img">
                    NO.
                    <span>1</span>
                  </div>
                 <div class="li_text">
                   <div class="txt_one">系统名称信息展示</div>
                   <div class="txt_tow">系统名称信息展示</div>
                 </div>
                </div>
                <div class="li_R">
                 <span>100</span>分
                </div>
              </div>
              <div class="li active">
                 <div class="li_L">
                 <div class="img">
                    NO.
                    <span>1</span>
                  </div>
                 <div class="li_text">
                   <div class="txt_one">系统名称信息展示</div>
                   <div class="txt_tow">系统名称信息展示</div>
                 </div>
                </div>
                <div class="li_R">
                 <span>100</span>分
                </div>
              </div>
            </div>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="titl">各团队系统运营质量</div>
    <div class="swipe_tow">
      <van-swipe :loop="false" :width="100" :height="120" @change="onChange" >
  <van-swipe-item v-for="(item,index) in data " :key="index">
    <div class="box tv" v-if='current==index'>
      <img src="../assets/img1/首个高亮展示默认图标@2x.png" alt="">
      <div class="name">{{item}}</div>
    </div>
    <div class="box" v-else>
      <img src="../assets/img1/默认团队图标@2x.png" alt="">
      <div class="name">{{item}}</div>
    </div>
  </van-swipe-item>
</van-swipe>
    </div>
  </div>
</template>

<script>
// import addButton from '../components/add-button'
import iPhoneXBottomSetAside from '../mixins/iphoneXBottomAside.js';
// import { mapState, mapMutations, mapActions } from 'vuex'
// 接口
import {

} from '@/core/api/index';
import GLOBAL from '@/components/global_variable';
import Vue from 'vue';
import { NoticeBar, Cell, Swipe, SwipeItem } from 'vant';

Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(NoticeBar);
Vue.use(Cell);
export default {
  data () {
    return {
      current: 0,
      data: ['科技', '飒飒是', '法非常', '阿凡达', '开卷考', '规范化发']
    };
  },
  created () {
    // minxing接口的方法
    document.addEventListener('deviceready', onDeviceReady, false); // 等待cordova加载
    let that = this;
    function onDeviceReady () {
      MXCommon.getCurrentUser(function (result) {
        console.log(result, '当前登录账号信息')
        GLOBAL.userId = result.login_name;
        GLOBAL.userName = result.name;
        // setTimeout(() => {

        // }, 10);
      });
    }
  },
  mixins: [iPhoneXBottomSetAside],
  methods: {
    // 团队名称滑动
    onChange (index) {
      this.current = index;
      console.log(index)
    },
    // 查看我的数据
    ClickData () {
      this.$router.push({
        name: 'project'
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.wrap {
  width: 100%;
 height: 100%;
  background: url("../assets/img1/首页背景@2x.png");
  background-size: contain;
  padding-top: 300px;
  box-sizing: border-box;
}
.data{
  width: 33.5%;
  height: 60px;
  border: 1px solid #000;
border-radius: 32.5px;
box-sizing: border-box;
margin-left: 35px;
display: flex;
padding:10px 20px;
margin-bottom: 50px;
.text{
  font-size: 28px;
  margin-right: 10px;
}
img{
  width: 20px;
  height: 25px;
  margin-top: 8px;
}
}
.swipe {
  width: 100%;
  height: 600px;
  padding: 0 20px;
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    text-align: center;
    .banner_one {
      width: 100%;
      height: 600px;
      background: url("../assets/img1/编组 15@2x.png");
      background-size: 100% 100%;
      .top {
        width: 100%;
        height: 100px;
        position: relative;

      }
      .left_icon {
        height: 80px;
        position: absolute;
        top: 5px;
        left: 58px;
        width: 130px;
        font-family: SourceHanSansCN-Medium;
        font-size: 28px;
        color: #313754;
        text-align: center;
      }
      .right_icon {
        float: right;
        width: 50px;
        height: 50px;
        margin-right:50px;
        margin-top: 35px;
        background: url('../assets/img1/分 享@2x.png');
        background-size: 100%;
      }
      .text{
        width: 88%;
        height: 500px;
        box-sizing: border-box;
       margin:0 auto;
       .li{
         width: 100%;
         height:150px;
         border-bottom: 1px solid rgba(200,200,200,0.25);
         padding:0 5px;
         display:flex;
         .li_L{
           width: 80%;
           height: 100%;
           display:inline-block;
           display:flex;
           box-sizing: border-box;
           img{
             width: 50px;
              height: 50%;
              margin-top: 40px;
              margin-right: 20px;
           }
           .li_text{
              .txt_one{
                font-family: SourceHanSansCN-Medium;
                font-size: 30px;
                color: #FFFFFF;
                line-height: 50px;
                margin-top: 35px;
              }
              .txt_tow{
                font-family: SourceHanSansCN-Normal;
                font-size: 24px;
                color: #A1A8CA;
                text-align: left;
              }
           }
         }
         .li_R{
           width: 20%;
           height: 100%;
           line-height: 150px;
           font-family: SourceHanSansCN-Normal;
            font-size: 24px;
            text-align: center;
             color: #A1A8CA;
            span{
              font-family: JCHEadA;
              font-size: 48px;
              color: #fff;
            }
         }
       }
       .active{
         border:0;
       }
      }
    }
    .banner_tow {
      width: 100%;
      height: 600px;
      background: url("../assets/img1/编组 14@2x.png");
      background-size: 100% 100%;
      .top {
        width: 100%;
        height: 100px;
        position: relative;

      }
      .left_icon {
        height: 80px;
        position: absolute;
        top: 5px;
        left: 58px;
        width: 130px;
        font-family: SourceHanSansCN-Medium;
        font-size: 28px;
        color: #313754;
        text-align: center;
      }
      .right_icon {
        float: right;
        width: 50px;
        height: 50px;
        margin-right:50px;
        margin-top: 35px;
        background: url('../assets/img1/分 享@2x.png');
        background-size: 100%;
      }
      .text{
        width: 88%;
        height: 500px;
        box-sizing: border-box;
       margin:0 auto;
       .li{
         width: 100%;
         height:150px;
         border-bottom: 1px solid rgba(200,200,200,0.25);
         padding:0 5px;
         display:flex;
         .li_L{
           width: 80%;
           height: 100%;
           display:inline-block;
           display:flex;
           box-sizing: border-box;
           .img{
              height: 50%;
              opacity: 0.32;
font-family: Impact;
font-size: 30px;
color: #FFFFFF;
              margin-right: 20px;
              line-height: 150px;
           }
           .li_text{
              .txt_one{
                font-family: SourceHanSansCN-Medium;
                font-size: 30px;
                color: #FFFFFF;
                line-height: 50px;
                margin-top: 35px;
              }
              .txt_tow{
                font-family: SourceHanSansCN-Normal;
                font-size: 24px;
                color: #A1A8CA;
                text-align: left;
              }
           }
         }
         .li_R{
           width: 20%;
           height: 100%;
           line-height: 150px;
           font-family: SourceHanSansCN-Normal;
            font-size: 24px;
            text-align: center;
             color: #A1A8CA;
            span{
              font-family: JCHEadA;
              font-size: 48px;
              color: #fff;
            }
         }
       }
       .active{
         border:0;
       }
      }
    }
  }
}
.titl{
  width: 100%;
  box-sizing: border-box;
padding-left: 35px;
  font-family: SourceHanSansCN-Medium;
font-size: 34px;
color: #313754;
padding-top: 30px;
}
.swipe_tow{
  width: 95%;
  margin-left: 35px;
  height:200px;
  margin-top: 20px;
   .van-swipe-item {
    margin-right: 10px;
  }
  /deep/ .van-swipe__indicators{
    display:none;
  }
  .box{
    width: 100%;
    height:200px;

    background: #FFFFFF;
    border: 1px solid #EBEDFF;
    box-shadow: 0 2px 10px 0 rgba(233,234,245,0.78);
    border-radius: 24px;
    box-sizing: border-box;
    padding:20px;
      img{
        width: 40px;
        height: 40px;
      }
      .name{
        margin-top: 30px;
        font-family: SourceHanSansCN-Normal;
        font-size: 30px;
        color: #4C5574;
        letter-spacing: 0;
      }

  }
  .tv{
      background:rgba($color: #FFBB30, $alpha: 1);
      color: #313754;
  }
}
</style>
